<template>
  <el-row :gutter="10">
    <el-col :lg="{span:6,offset:0}">
      <el-card style="margin-bottom: 15px">
        <template #header>
          <p style="text-align: left">关于我</p>
        </template>
        <div style="text-align: center">
          <el-avatar
              :size="100" />
          <h4 style="padding: 4px 0">
            {{ userName }}
          </h4>
          <p>{{ role }} </p>
        </div>
        <el-divider></el-divider>
        <p>公司: {{companyName}} </p>
        <p>部门: {{departmentName}} </p>
        <p>职位: {{jobName}} </p>
        <p>号码: {{telephone}} </p>
      </el-card>
    </el-col>
    <el-col :lg="{span:18,offset:0}">
      <el-card>
        <el-tabs v-model="activeName" >
          <el-tab-pane label="账号绑定" name="first">
            <el-form inline>
              <el-form-item label="手机号">
                <el-input v-model="phone"
                          :disabled="bianji"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="bianji = !bianji" v-show="bianji" size="mini">编辑</el-button>
                <el-button @click="bianji = !bianji" v-show="!bianji" type="primary" size="mini">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="second">
            <el-form ref="form" :rules="rules"
                     :model="password"
                     style="width: 500px;" >
              <el-form-item prop="oldPass" label="原密码" label-width="80px">
                <el-input placeholder="请输入" v-model="password.oldPass" ></el-input>
              </el-form-item>
              <el-form-item prop="newPass" label="新密码" label-width="80px">
                <el-input placeholder="请输入" v-model="password.newPass" ></el-input>
              </el-form-item>
              <el-form-item label="" label-width="80px">
                <el-button type="primary" @click="submitPassword">提交</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="上传头像" name="q">
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { mapGetters } from 'vuex'
import {updatePass} from "../../api/user";
import {requiredRule} from "../../uilts";

export default {
  name: "index",
  data() {
    return {
      activeName:"first",
      bianji:true,
      phone:'',
      list:[],
      password:{
        newPass:"",
        oldPass:""
      },
      rules:{
        newPass:requiredRule(),
        oldPass:requiredRule(),
      }
    }
  },
  computed:{
    ...mapGetters([
        'userName',
        'role',
        'telephone',
        'departmentName',
        'jobName',
        'companyName'
    ])
  },
  methods: {
    submitPassword(){
      this.$refs.form.validate(pass => {
        if(pass){
          this.$confirm('此操作将修改密码, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            await updatePass(this.password)
            this.$confirm('密码修改成功，请退出重新登录。', '提示', {
              confirmButtonText: '确定',
              type: 'warning',
              showClose:false,
              showCancelButton:false
            }).then(async () => {
              await this.$store.dispatch('logout')
              await this.$router.push('/')
            }).catch(() => {
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }
      })
    }
  }
}
</script>

<style scoped>
>>>.el-table th.el-table__cell>.cell{
  font-size: 16px;
  color: #333333;
}
</style>
















